<template>
  <div class="padding">
    <el-card>
      <div slot="header" class="clearfix">
        <span>部门销售货量统计表</span>
      </div>

      <el-form v-model="searchForm" size="mini" label-width="80px">
        <el-row :gutter="10">
          <el-col :span="5">
            <el-form-item prop="shippingWays">
              <div slot="label">渠道类型：</div>
              <el-select v-model="searchForm.shippingWays" multiple filterable placeholder="默认选择全部">
                <el-option v-for="(item, value) in salePerformanceVo.channelWayMap" :key="value" :label="item" :value="value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="入库时间" prop="rangeInStockDate" >
              <el-date-picker type="daterange" v-model="searchForm.rangeInStockDate" format="yyyy-MM-dd"
                              value-format="yyyy-MM-dd" :style="{width: '100%'}" start-placeholder="开始日期" end-placeholder="结束日期"
                              range-separator="至" clearable></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button size="mini" type="primary" @click="statistics">统计</el-button>
          </el-col>
        </el-row>
      </el-form>

      <SimpleBarChart v-if="chartData.xTitle"
                  :chart-data="chartData"
                  :titleInfo="titleInfo"
      />
    </el-card>
  </div>
</template>

<script>
  import { ajax } from "@/store/yg/common/utils";
  import SimpleBarChart from "./components/SimpleBarChart";
  export default {
    props: ["data"],
    components: {
      SimpleBarChart
    },
    data() {
      return {
        salePerformanceVo: {
          channelWayMap: null
        },
        searchForm: {
          shippingWays: ["ZX"],
          rangeInStockDate: null
        },
        titleInfo: {
          text: "部门销售货量统计表",
          subtext: ``,
          legend: ['货量']
        },
        chartData: {

        }

      };
    },
    mounted() {
      this.init();
    },
    methods: {
      async init() {
        const data = await ajax("toSalesVolumeStatisticsQuery", {});
        if(data.code == 200){
          this.salePerformanceVo.channelWayMap = data.data;
        }
      },
      statistics() {
        this.countSalesVolumeStatistics();
      },
      async countSalesVolumeStatistics(){
        const data = await ajax("toSalesVolumeStatistics", this.searchForm);
        if(data.code == 200){
          this.titleInfo.subtext = `${data.data.subtext}`;
          var chartData = {};
          chartData["xTitle"] = data.data.xData;
          chartData["series"] = data.data.series;
          chartData["name"] = '货量';
          this.chartData = chartData;
        }else{
          this.$message.error(data.message);
        }
      }
    }
  };
</script>
<style scoped>
  /deep/ .el-select {
    width: 100%;
  }
</style>
